﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Resource/Jquery/jquery-1.10.2.js"></script>
</head>
<body>
    <div style="width: 700px; height: 500px;">
        <div id="d1" style="position: absolute; background-image: url(img1.jpg); background-repeat: no-repeat; width: 700px; height: 500px;">
        </div>
        <div id="d2" style="position: absolute; background-image: url(img2.jpeg); background-repeat: no-repeat; width: 700px; height: 500px;">
        </div>
    </div>
</body>
</html>
<script>

    function play() {
        var o1 = $("#d1").css("opacity");
        var o2 = $("#d2").css("opacity");


    }

    d1Animate(1);

    function d1Animate(opacity) {
        if (opacity == 1) {
            $("#d1").animate({ "opacity": -0.1 }, 1000, null, function () { d2Animate(0); });
        }
        if (opacity == 0) {
            $("#d1").animate({ "opacity": +0.1 }, 1000, null, function () { d2Animate(1); });
        }
    }

    function d2Animate(opacity) {
        if (opacity == 1) {
            $("#d2").animate({ "opacity": -0.1 }, 1000, null, function () { d1Animate(0); });
        }
        if (opacity == 0) {
            $("#d2").animate({ "opacity": +0.1 }, 1000, null, function () { d1Animate(1); });
        }
    }
</script>
